<template>
  <div class="user-list">
    <el-table :data="tableData" style="width: 100%" max-height="600" stripe>
      <el-table-column fixed prop="userName" label="用户" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row | showUserInfo }}</template>
      </el-table-column>
      <el-table-column prop="createName" label="部门" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.deptFullName | deptFormat }}
        </template>
      </el-table-column>
      <el-table-column prop="roleString" label="角色" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.menuRoleList | roleFilter }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
      ></el-table-column>
    </el-table>
    <Pagination
      style="margin-top: 20px"
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        deptId: '',
        del: '1',
        isChildUser: '1',
      },
      tableData: [],
      pageObj: {},
      multipleSelection: [],
    }
  },
  mounted() {
    this.$bus.$on('refreshUserList', (v) => {
      Object.assign(this.listQuery, v)
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refreshUserList')
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch('queryTbUserList', this.listQuery)
      this.tableData = res.data
      this.pageObj = res
    },
  },
  filters: {
    roleFilter(list) {
      return list.length > 0 ? list.map((v) => v.name).toString() : '--'
    },
  },
}
</script>
<style scoped lang="scss">
</style>